<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
  <style>
    .red {
      color:red
    }
  </style>
</head>
<body>
  <div id="app">
    <div class="container">
      <div class="form-group">
        <div class="input-group">
            <input type="text" class="form-control" placeholder="搜索">
        </div>
    </div>
      <table class="table table-bordered table-hover">
        <thead>
          <tr>
            <th>编号</th>
            <th>资产名称</th>
            <th>价格</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <!-- <tr v-for="(循环变量，索引变量) in 数据"> -->
          <tr v-for="(item, idx) in list">
            <td>{{item.id}}</td>
            <td>{{item.name}}</td>
            <!-- 如果价格超过100，就有red这个类 -->
            <!-- <td class="red">{{item.price}}</td> -->

            <!-- 三元
            -->
            <!-- <td :class='item.price > 100 ? "red" : ""'>{{item.price}}</td> -->
            
            <!-- 放一个对象
               如果对象中的属性值是true,
               则把对象中的属性名添加到类名中
            -->
            <td :class="{red:item.price>100}">{{item.price}}</td>
           
            <td><a href="#" @click.prevent="hDel(idx)">删除</a></td>
          </tr>
        </tbody>
      </table>

      <!-- 添加资产 -->
      <form class="form-inline">
        <div class="form-group">
            <div class="input-group">
                <input v-model.trim="name" type="text" class="form-control" placeholder="资产名称">
            </div>
        </div>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <div class="form-group">
          <div class="input-group">
              <input v-model.trim.number="price" type="text" class="form-control" placeholder="价格">
          </div>
      </div>
      &nbsp;&nbsp;&nbsp;&nbsp;
      <!-- 阻止表单提交 -->
        <button class="btn btn-primary" @click.prevent="hAdd">添加资产</button>
      </form>
    </div>
  </div>
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js"></script>
  <script>
      // 目标： 用vue.js实现
      // 1. 把表格数据显示出来
      // 2. 实现删除功能
      // 3. 添加功能
      // 4. 标注：如果价格超过100，标红色显示。
      

      // 步骤：
      // 1.引入vue.js
      // 2. 实例化vue对象 
      //    三大件： el,data,methods
      // 3. 实现功能
      //   (1) 循环渲染数据： v-for
      //   (2) 删除数据：@click,并传入要删除的下标
      //   (3) 标注红色 动态的添加样式，只有>100才加。 使用对象来绑定class.
      //   (4) 添加功能
      //     1) 基本输入框结构
      //     2) 点击添加
      //      - 收集用户的输入信息:v-model,补一些必要的修饰符。
      //      - 简单判空
      //      - 添加到list中

      const vm = new Vue({
        el: '#app',
        data: {
           name: '', // 名称
           price: 0, // 价格
           list: [
              { id: 1, name: '外套', price: 199 },
              { id: 2, name: '裤子', price: 34 },
              { id: 3, name: '鞋', price: 25.4 },
              { id: 4, name: '头发', price: 19900 }
          ]
        },
        methods: {
          hDel (index) {
            console.log('要删除的下标是',index)
            // 删除数组中指定位置的元素
            this.list.splice(index, 1)
          },
          hAdd () {
              // 收集用户的输入信息
              // 简单判空
              if(this.name ==='') {
                return 
              }

              if(this.price == '' || this.price < 0) {
                return 
              }

              // 添加到list中
              console.log(this.name,this.price)
              // 向数组中添加一个元素
              let id = 1
              if (this.list.length > 0) {
                // 新的id = 数组中最后一个元素的id值+1
                id = this.list[this.list.length-1].id + 1
              }

              this.list.push({
                id: id,
                name: this.name,
                price: this.price
              })


          }
        }
      })


      // list: [
      //     { id: 1, name: '外套', price: 99 },
      //     { id: 2, name: '裤子', price: 34 },
      //     { id: 3, name: '鞋', price: 25.4 },
      //     { id: 4, name: '头发', price: 19900 }
      // ]
  </script>
</body>
</html>